<template>
  <div>
    <h1>动态组件：动态切换组件显示</h1>
    <div>
      <button @click="showComponent('Component5')">显示组件5</button>
      <button @click="showComponent('Component6')">显示组件6</button>
    </div>
    <div>
      <!-- 方式1：通过v-if或v-show控制是否显示 -->
      <!-- <div>
        <Component5 v-if="name === 'Component5'" />
        <Component6 v-if="name === 'Component6'" />
      </div>-->
      <!-- 方式2：通过动态组件方式显示 -->
      <!--默认每次切换显示组件都会重新初始化数据,为保存数据需要keep-alive组件-->
      <!-- <component :is="name">
        <Component5 />
        <Component6 />
      </component>-->
      <keep-alive>
        <component :is="name">
          <Component5 />
          <Component6 />
        </component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Component5 from "../components/Component5";
import Component6 from "../components/Component6";
export default {
  name: "demon12",
  components: {
    Component5,
    Component6
  },
  data() {
    return {
      name: "Component5"
    };
  },
  methods: {
    showComponent(name) {
      this.name = name;
    }
  }
};
</script>
<style lang="stylus" scoped></style>
